<template>
    <div>
        订单汇总
        <!-- 1.搜索栏 -->
        <el-form :inline="true" :model="orderSummary" class="demo-form-inline" style="margin-top: 20px;">
            <!-- 搜索栏第一行 -->
            <el-row style="text-align: left;">
                <el-col :span="20" :offset="2">
                    <el-form-item label="订单编号">
                        <el-input v-model="orderSummary.orderno" placeholder="订单编号"></el-input>
                    </el-form-item>
                    <el-form-item label="商品名称">
                        <el-input v-model="orderSummary.productname" placeholder="商品名称"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="orderSummary.status" placeholder="请选择状态">
                            <el-option label="未审批" value="0"></el-option>

                            <el-option label="不纳入采购计划" value="1"></el-option>
                            <el-option label="已纳入采购计划" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- 搜索栏第二行 -->
            <el-row style="text-align: left;">
                <el-col :span="20" :offset="2">
                    <el-form-item label="商品需求量≥">
                        <el-input v-model="orderSummary.demand" placeholder="商品需求量"></el-input>
                    </el-form-item>
                    <el-form-item label="类型">
                        <el-select v-model="orderSummary.type" placeholder="请选择类型">
                            <el-option label="成品" value="0"></el-option>
                            <el-option label="次品" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="el-icon-search" circle @click="search()"></el-button>

                        <el-button type="primary" @click="clearForm()">清空</el-button>
                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>

        <!-- 2.表格 -->
        <el-row style="margin-top: 30px;">
            <el-col :span="20" :offset="2">
                <template>
                    <el-table :data="summaryList" style="width: 100%">
                        <el-table-column type="expand">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                
                                    <el-form-item label="订单客户:" >
                                        <span>{{ props.row.customername }}</span>
                                    </el-form-item>
                                    <el-form-item label="客户收件地址:">
                                        <span>{{ props.row.address }}</span>
                                    </el-form-item>
                                    <el-form-item label="客户联系方式:">
                                        <span>{{ props.row.contactphone }}</span>
                                    </el-form-item>
                                    <el-form-item label="订单总价:">
                                        <span>{{ props.row.price }}</span>
                                    </el-form-item>
                                    <el-form-item label="订单状态:">
                                        <span>{{ props.row.orderStatus }}</span>
                                    </el-form-item>
                                   
                                </el-form>
                            </template>
                        </el-table-column>

                        <el-table-column label="订单编号" width="200">
                            <template slot-scope="scope">
                                <el-tag>{{ scope.row.orderno }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="商品名称" width="120">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.productname }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="商品需求量" width="170">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{scope.row.demand }}</span>{{scope.row.uname}}
                            </template>
                        </el-table-column>

                        <el-table-column label="状态" width="200" align="center">
                            <template slot-scope="scope">
                                <div style="margin-left: 10px" :class="binClass(scope.row.status)">
                                    {{binConter(scope.row.status)}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="商品类型" width="150" align="center">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.type}}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>

            </el-col>



        </el-row>

        <!--3.分页 -->
        <el-row style="text-align: center;margin-top: 50px;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="orderSummary.page" :page-sizes="[2, 4]" :page-size="orderSummary.size"
                layout="prev, pager, next, jumper,total, sizes" :total="total">
            </el-pagination>
        </el-row>



    </div>
</template>


<script>


export default{
    data(){
        return{
            isPageChangeToOne:true,

            //1.搜索栏数据
            orderSummary:{
                page:1,
                size:2
            },

            //2.表格数据
            summaryList:[],

            //3.分页数据
            total:0,
            totalPage:0,

        }
    },
    methods:{
          //订单状态数据回显
          binConter(status){
                
                switch (status) {
                    case 1:
                    return '已纳入采购计划';

                        
                    case 0:
                    return '不纳入采购计划';
                    default:
                        return '';
                }
            },
            binClass(status){
                switch (status) {
                    case 0:
                        return 'tagblue0';
                    case 1:
                        return 'tagblue1';
                    case 2:
                        return 'tagblue2';
                    default:
                        return '';
                }
            },

            //1.搜索栏函数
            search(){
                if(this.isPageChangeToOne){
                this.orderSummary.page=1
                }
                this.$axios.post("orderSummary/getSummaryList",this.orderSummary).then(respData => {
                    console.log(respData)
                    this.summaryList = respData.data.data.data
                    this.total=respData.data.data.total
                    this.totalPage=respData.data.data.totalPage
                })        
            },
            clearForm(){
                this.orderSummary={
                page:1,
                size:2
                 }
                this.search()
            },


            //2.分页函数
            handleSizeChange(size){
                this.orderSummary.size=size;
                this.orderSummary.page=1
                this.search()
            },
            handleCurrentChange(page){
                this.isPageChangeToOne=false;
                this.orderSummary.page=page;
                this.search()
                this.isPageChangeToOne=true
            }

            





    },
    mounted(){
        this.search()
    }
   
}
</script>

<style scoped>
 .tagblue0 {
      text-align: center;
      border-radius: 12px;
      background: #E8F8F3;
      border: 1px solid #fa556e;
      color: #fa5563;
  }

  .tagblue1 {
      text-align: center;
      border-radius: 12px;
      background: #E8F8F3;
      border: 1px solid #2e0cd6;
      color: #2e0cd6;
  }

  .tagblue2 {
      text-align: center;
      border-radius: 12px;
      background: #E8F8F3;
      border: 1px solid #21BD88;
      color: #21BD88;
  }

  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #409EFF;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

</style>
